<div class="Vulnerability" *ngIf="orderedVulnerabilities && orderedVulnerabilities.length > 0">
    <div class="summary-labels">
        <div class="label unknown" [ngStyle]="{ 'width': (100*summary.unknown/summary.total)+'%'}"
             *ngIf="summary.unknown > 0;">{{summary.unknown + ' Unknown'}}
            <span *ngIf="summary.deltaUnknown < 0">(-</span>
            <span *ngIf="summary.deltaUnknown > 0">(+</span>
            <span *ngIf="summary.deltaUnknown !== 0">{{summary.deltaUnknown}})</span>
        </div>
        <div class="label negligible" [ngStyle]="{ 'width': (100*summary.negligible/summary.total)+'%'}"
             *ngIf="summary.negligible > 0;">{{summary.negligible + ' Negligible'}}
            <span *ngIf="summary.deltaNegligible < 0">(-</span>
            <span *ngIf="summary.deltaNegligible > 0">(+</span>
            <span *ngIf="summary.deltaNegligible !== 0">{{summary.deltaNegligible}})</span>
        </div>
        <div class="label low" [ngStyle]="{ 'width': (100*summary.low/summary.total)+'%'}" *ngIf="summary.low > 0;">
            {{summary.low + ' Low'}}
            <span *ngIf="summary.deltaLow < 0">(-</span>
            <span *ngIf="summary.deltaLow > 0">(+</span>
            <span *ngIf="summary.deltaLow !== 0">{{summary.deltaLow}})</span>
        </div>
        <div class="label medium" [ngStyle]="{ 'width': (100*summary.medium/summary.total)+'%'}"
             *ngIf="summary.medium > 0;">{{summary.medium + ' Medium'}}
            <span *ngIf="summary.deltaMedium < 0">(-</span>
            <span *ngIf="summary.deltaMedium > 0">(+</span>
            <span *ngIf="summary.deltaMedium !== 0">{{summary.deltaMedium}})</span>
        </div>
        <div class="label high" [ngStyle]="{ 'width': (100*summary.high/summary.total)+'%'}" *ngIf="summary.high > 0;">
            {{summary.high + ' High'}}
            <span *ngIf="summary.deltaHigh < 0">(-</span>
            <span *ngIf="summary.deltaHigh > 0">(+</span>
            <span *ngIf="summary.deltaHigh !== 0">{{summary.deltaHigh}})</span>
        </div>
        <div class="label critical" [ngStyle]="{ 'width': (100*summary.critical/summary.total)+'%'}"
             *ngIf="summary.critical > 0;">{{summary.critical + ' Critical'}}
            <span *ngIf="summary.deltaCritical < 0">(-</span>
            <span *ngIf="summary.deltaCritical > 0">(+</span>
            <span *ngIf="summary.deltaCritical !== 0">{{summary.deltaCritical}})</span>
        </div>
        <div class="label defcon1" [ngStyle]="{ 'width': (100*summary.defcon/summary.total)+'%'}"
             *ngIf="summary.defcon > 0;">{{summary.defcon + ' Defcon1'}}
            <span *ngIf="summary.deltaDefcon < 0">(-</span>
            <span *ngIf="summary.deltaDefcon > 0">(+</span>
            <span *ngIf="summary.deltaDefcon !== 0">{{summary.deltaDefcon}})</span>
        </div>
    </div>

    <div class="summary-bar">
        <div class="bar unknown" [ngStyle]="{ 'width': (100*summary.unknown/summary.total)+'%'}"
             *ngIf="summary.unknown > 0;"></div>
        <div class="bar negligible" [ngStyle]="{ 'width': (100*summary.negligible/summary.total)+'%'}"
             *ngIf="summary.negligible > 0;"></div>
        <div class="bar low" [ngStyle]="{ 'width': (100*summary.low/summary.total)+'%'}" *ngIf="summary.low > 0;"></div>
        <div class="bar medium" [ngStyle]="{ 'width': (100*summary.medium/summary.total)+'%'}"
             *ngIf="summary.medium > 0;"></div>
        <div class="bar high" [ngStyle]="{ 'width': (100*summary.high/summary.total)+'%'}"
             *ngIf="summary.high > 0;"></div>
        <div class="bar critical" [ngStyle]="{ 'width': (100*summary.critical/summary.total)+'%'}"
             *ngIf="summary.critical > 0;"></div>
        <div class="bar defcon1" [ngStyle]="{ 'width': (100*summary.defcon/summary.total)+'%'}"
             *ngIf="summary.defcon > 0;"></div>
    </div>

    <div class="dot-container">
        <ng-container *ngFor="let v of orderedVulnerabilities">
            <div class="vuln {{v.severity}}" nz-popover nzPopoverTitle="{{v.cve}}" nzPopoverContent="{{v.component + ' ' + v.version}}"
                 (click)="updateFilter(v)"></div>
        </ng-container>
    </div>

    <div class="list">
        <app-vulnerabilities-list [filter]="filter" [vulnerabilities]="orderedVulnerabilities" [edit]="edit"></app-vulnerabilities-list>
    </div>

</div>
<nz-alert nzType="info" *ngIf="!orderedVulnerabilities || orderedVulnerabilities.length === 0" nzMessage="No vulnerability"></nz-alert>
